<script setup>
import { ref } from "vue";
import { noticeMgrListService } from "@/api";
import { formatTime, formatStutas, formatType } from "@/utils/format";

const articleList = ref([]);
const loading = ref(false);
// 搜索参数
const params = ref({
  pageNum: 1,
  pageSize: 10,
  status: 1,
});
// 获取数据
const getArticleList = async () => {
  loading.value = true;
  const { data } = await noticeMgrListService(params.value);
  console.log(data);
  articleList.value = data.records;
  // total.value = data.total;
  loading.value = false;
};
getArticleList();
</script>
<template>
  <div class="message-list" v-loading="loading">
    <div class="message-item" v-for="item in articleList">
      <el-tag :type="item.noticeType == '1' ? 'success' : 'warning'">{{
        formatType(item.noticeType, "noticeType")
      }}</el-tag>
      <el-popover
        placement="left-start"
        :title="item.noticeTitle"
        width="300"
        trigger="hover"
      >
        <div>{{ item.noticeContent }}</div>
        <template #reference>
          <div class="message-content">
            {{ item.noticeTitle }}
          </div>
        </template>
      </el-popover>
    </div>
  </div>
</template>
<style scoped lang="scss">
.message-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  height: 230px;
  margin: 0px auto;
  overflow: auto;
}

.message-item {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 5px;
  // margin-bottom: 15px;
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.rank-icon {
  font-size: 24px;
  margin-right: 15px;
  color: #ffd700; /* 金色星星图标 */
}

.message-content {
  width: 80%;
  margin-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

h3 {
  margin: 0;
  margin-bottom: 5px;
}

p {
  margin: 0;
}
</style>
